<template>
    <view class="zyby-img-upload-common auth-img-item" :class="{'img-item-special': !imgUrl}">
        <div v-if="!imgUrl" @tap="ChooseImage" class='flex-perfect-center'>
            <slot name="image">
                <image :src="imgUrl?imgUrl:'/static/img/btn_data_upload.png'"></image>
            </slot>
            <div class="text-desc">
				<navigator url="/pages/video/video">视频区域</navigator>
                <slot>上传图片</slot>
            </div>
        </div>
        <img class="exist-img" v-else :src="imgUrl" @tap="ChooseImage">
        <!-- <progress class="upload-progress" v-if="progress > 0" :percent="progress" active stroke-width="3"></progress> -->
        <img class="img-delete" v-if="imgUrl && deleteFlag" src="/static/icon_img/icn_delete.png" @tap="DelImg">
    </view>
</template>

<script>
    import OSSUtil from '../../ossUtil.js'
    export default {
        name: 'byImgUpload',
        props: {
            authId: String,
            // imgUrl: String,
            deleteFlag: Boolean,
            startShowAction: Function,
            startDelete: Function,
            imgActions: Array
        },
        data() {
            return {
                progress: 0,
				imgUrl:'',
                imgData: {
                    visible: false,
                    actions: this.imgActions
                }
            }
        },
        methods: {
            async ChooseImage() {
                let files = await OSSUtil.getImage(); // 选择图片
                let sign = await OSSUtil.get_STS() // 获取签名等信息

                let imageSrc = files.tempFilePaths[0];
                let fileName = OSSUtil.getFileName(imageSrc); // 自定义上传后的文件名称
                
                let uploadTask = uni.uploadFile({
                    url: sign.host,
                    filePath: imageSrc,
                    fileType: 'image',
                    name: 'file',
                    formData: {
                        name: imageSrc,
                        'key': fileName,
                        'policy': sign.policy,
                        'OSSAccessKeyId': sign.accessId,
                        'success_action_status': '200',
                        //让服务端返回200,不然，默认会返回204
                        'signature': sign.signature,
                    },
                    success: (res) => {
                        console.log('uploadImage success, res is:', res)
                        uni.showToast({
                            title: '上传成功',
                            icon: 'success',
                            duration: 1000
                        });
						let nowTime = function getNowFormatDate() {
							var date = new Date();
							var seperator1 = "-";
							var year = date.getFullYear();
							var month = date.getMonth() + 1;
							var strDate = date.getDate();
							if (month >= 1 && month <= 9) {
								month = "0" + month;
							}
							if (strDate >= 0 && strDate <= 9) {
								strDate = "0" + strDate;
							}
							var currentdate = year + seperator1 + month + seperator1 + strDate;
							return currentdate;
						}()
						this.imgUrl  = sign.host+"/"+fileName
						// console.log({data: sign.host +'/'+ fileName, authId: this.authId});
                        this.$emit('imgUploaded', {data: sign.host+'/goods/images/' +nowTime+ '/' + fileName, authId: this.authId});
                    },
                    fail: (err) => {
                        console.log('uploadImage fail', err);
                        uni.showModal({
                            content: err.errMsg,
                            showCancel: false
                        });
                    }
                });
                uploadTask.onProgressUpdate((res) => {
                    console.log("上传进度" + res.progress);
                    this.progress = res.progress;
                });

                // this.$emit('imgUploaded', {data: files.tempFilePaths[0], authId: this.authId});
            },
            ViewImage(e) {
                uni.previewImage({
                    urls: this.imgList,
                    current: e.currentTarget.dataset.url
                });
            },
            DelImg() {
                this.$emit('imgDel', {
                    authId: this.authId
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
    // @import "../style/function.less";
    // @import "../style/variable.less";

    .zyby-img-upload-common {
        height: 450rpx;
        width: 100%;
        margin-top: 26rpx;
    }

    .auth-img-item {
        position: relative;

        >div:first-child {
            height: 100%;
            flex-direction: column;

            // image {
            //     .square-hw(46)
            // }

            .text-desc {
                margin-top: 20rpx;
                font-family: PingFangSC-Regular;
                font-size: 26rpx;
                // color: @base-finish-color-deep;
            }
        }

        .exist-img {
            width: 100%;
            height: 100%;
        }

        .upload-progress {
            position: absolute;
            bottom: 0;
            right: 0;
            left: 0;
        }

        .img-delete {
            // .square-hw(36);
            position: absolute;
            top: 10rpx;
            right: 10rpx;
        }
    }

    .img-item-special {
        border: 1px dashed #13DBBF;
        /*no*/
        border-radius: 6rpx;
        /*no*/
    }
</style>